<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录您的账号</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <div class="main">
        <p class="logo"></p>

        <form action="">
            <p class="one">
                <label for="username" class="tu1"></label>
                <input type="text" class="first" id="username" placeholder="请输入您的手机号">
                <span></span>
            </p>
            <p class="two">
                <label for="password" class="tu2"></label>
                <input type="password" class="fourth" id="password" placeholder="请输入您的密码">
            </p>
            <p class="fuxuan">
                <input type="checkbox" class="checkbox" checked> 同意 <a href="" style=" color: #0c79cc;">良仓注册条款</a><span>忘记密码？</span>
            </p>

            <button class="btn">立即登录</button>

        </form>

        <div class="footer">
            <p></p>
            <a href="reg.html">注册良仓</a>
        </div>

    </div>
    <script>
        //正则验证
        let isphone = false;
        $(".first").change(function () {
            let str = this.value;
            console.log(str);
            let reg = /^1[0-9]{10}$/;
            if (reg.test(str)) {
                isphone = true;
            } else {
                isphone = false;
                alert("请输入正确的手机号码")
            }
        })

        //登录
        $(".btn").click(e => {
            //阻止默认行为
            e.preventDefault();

            let username = $(".first").val();
            let password = $(".fourth").val();

            //发送请求
            let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";
            $.get(loginAPI, { username, password}).then(r => {
                console.log(r);
                alert(r.msg)
                if (r.code == 1) {
                    // r.data 服务器返回的数据 {msg，code，data}
                    let { id, token, username } = r.data;
                    localStorage.setItem("id", id);
                    localStorage.setItem("token", token);
                    localStorage.setItem("username", username);
                    location.href = "index.html";
                }
            })
        })
    </script>
</body>

</html>